<template>
  <div class="modal-overlay" @click="close">
    <div class="modal-content" @click.stop>
      <h3>{{ notification.title }}</h3>
      <div class="notification-details">
        <p><strong>日期：</strong>{{ notification.date }}</p>
        <p><strong>类型：</strong>{{ notification.type }}</p>
        <div class="notification-content">
          <p><strong>内容详情：</strong></p>
          <p>{{ notification.content }}</p>
        </div>
        <div v-if="notification.attachments && notification.attachments.length > 0" class="notification-attachments">
          <p><strong>附件：</strong></p>
          <ul>
            <li v-for="(attachment, index) in notification.attachments" :key="index">
              <div class="attachment-item">
                <component
                    :is="getFileIconComponent(attachment.name)"
                    class="file-icon"
                />
                <span class="file-name">{{ attachment.name }}</span>
                <div class="file-actions">
                  <el-button
                      size="small"
                      @click.stop="previewFile(attachment)"
                      v-if="isPreviewable(attachment.name)"
                  >
                    预览
                  </el-button>
                  <el-button
                      size="small"
                      type="primary"
                      @click.stop="downloadFile(attachment)"
                  >
                    下载
                  </el-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <el-button type="primary" @click="close">关闭</el-button>

      <!-- 文件预览-->
      <el-dialog
          v-model="previewVisible"
          :title="previewTitle"
          width="80%"
          top="5vh"
      >
        <div v-if="previewType === 'image'" class="preview-container">
          <img :src="previewUrl" style="max-width: 100%; max-height: 70vh;" />
        </div>
        <div v-else-if="previewType === 'pdf'" class="preview-container">
          <iframe
              :src="`https://docs.google.com/viewer?url=${encodeURIComponent(previewUrl)}&embedded=true`"
              width="100%"
              height="600px"
              frameborder="0"
          ></iframe>
        </div>
        <div v-else class="unsupported-preview">
          该文件类型不支持在线预览，请下载后查看
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton, ElDialog } from 'element-plus'
import { downloadFile as downloadFileUtil } from '@/utils/file'
import {
  Document as PdfIcon,
  Notebook as WordIcon,
  DataBoard as ExcelIcon,
  DataAnalysis as PptIcon,
  Picture as ImageIcon,
  Files as TextIcon,
  Box as ZipIcon,
  Folder as FileIcon
} from '@element-plus/icons-vue'

interface Attachment {
  name: string
  url: string
}

interface Notification {
  title: string
  date: string
  type: string
  content: string
  attachments?: Attachment[]
}

const props = defineProps<{
  notification: Notification
}>()

const emit = defineEmits(['close'])

// 预览状态
const previewVisible = ref(false)
const previewUrl = ref('')
const previewTitle = ref('')
const previewType = ref('')

const fileIconComponents = {
  pdf: PdfIcon,
  doc: WordIcon,
  docx: WordIcon,
  xls: ExcelIcon,
  xlsx: ExcelIcon,
  ppt: PptIcon,
  pptx: PptIcon,
  jpg: ImageIcon,
  jpeg: ImageIcon,
  png: ImageIcon,
  gif: ImageIcon,
  txt: TextIcon,
  zip: ZipIcon,
  rar: ZipIcon
}

const getFileIconComponent = (fileName: string) => {
  const ext = fileName.split('.').pop()?.toLowerCase() || ''
  return fileIconComponents[ext] || FileIcon
}

const isPreviewable = (fileName: string) => {
  const ext = fileName.split('.').pop()?.toLowerCase() || ''
  return ['pdf', 'jpg', 'jpeg', 'png', 'gif'].includes(ext)
}

// 预览文件
const previewFile = (attachment: Attachment) => {
  const ext = attachment.name.split('.').pop()?.toLowerCase() || ''

  previewUrl.value = attachment.url
  previewTitle.value = `预览 - ${attachment.name}`

  if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
    previewType.value = 'image'
  } else if (ext === 'pdf') {
    previewType.value = 'pdf'
  } else {
    previewType.value = 'unsupported'
  }

  previewVisible.value = true
}

const downloadFile = (attachment: Attachment) => {
  downloadFileUtil(attachment.url, attachment.name)
}

const close = () => {
  emit('close')
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 25px;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
  margin-bottom: 15px;
  font-size: 1.5em;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.notification-details {
  margin-bottom: 20px;
}

.notification-details p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.notification-details strong {
  color: #333;
  font-weight: 600;
}

.notification-content {
  margin: 15px 0;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  border-left: 4px solid #007bff;
}

.notification-attachments {
  margin-top: 15px;
}

.notification-attachments ul {
  list-style-type: none;
  padding-left: 0;
  margin-top: 5px;
}

.notification-attachments li {
  margin-bottom: 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.file-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  color: #606266;
  flex-shrink: 0;
}

.file-icon.svg-icon-pdf { color: #e74c3c; }
.file-icon.svg-icon-word { color: #2b579a; }
.file-icon.svg-icon-excel { color: #217346; }
.file-icon.svg-icon-ppt { color: #d24726; }
.file-icon.svg-icon-image { color: #3498db; }
.file-icon.svg-icon-text { color: #7f8c8d; }
.file-icon.svg-icon-zip { color: #f39c12; }

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}

.file-actions {
  display: flex;
  gap: 5px;
}

.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.unsupported-preview {
  padding: 20px;
  text-align: center;
  color: #666;
}
</style>